🚨더 고민하면 웹퍼블리싱 수강 신청 기간이 끝나요🚨
0원으로 스킬 UP 커리어 UP 경험하세요
신청 마감까지
0 0 0 0
2024-05-21T17:00




온라인 과정

인터랙티브 웹 완전 정복 :
나만의 웹사이트 제작으로 포트폴리오 완성

  • | 학습 정보

    • 모집 기간 : 2024년 5월 7일 ~ 2024년 5월 21일 17시
    • 수강 기간 : 2024년 5월 22일 ~ 2024년 7월 17일 (총 8주, 80시간)
    • 수강료 : 49만원 (내일배움카드 90% 지원 자기부담금 4.9만원)

  • | 학습 서비스

    • 진도율 80% 달성 및 실습 참여 시 자부담금 환급
    • 1:1 학습 멘토링 진행
    • NCS 수료증 발급
    • 100% 녹화강의로 자유롭게 수강 가능
    • 파이널 프로젝트 제출 시 현직자 리뷰 제공

  • | 이번 기수 혜택

    • 끝까지 열공 챌린지 미션 달성 시 스킬 UP! 할 수 있는 지정 강의 3개 제공
    • 이번 기수 수강 종료 후 HRD-Net 후기 작성 시, 숏북 제공
    • 수료 시 수강한 강의 평생소장권 제공

신청하기

잠깐, 과정을 알아보기 전에
혹시 내일배움카드가 없으신가요?

그럼 내일배움카드 발급부터 도와드릴게요!
내일배움카드 발급을 신청하시면, 담당 매니저가 꼼꼼히 안내드려요.
차근차근 발급부터 시작하세요!

⁕ HRD-Net 과정명은 [웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인] 입니다.

‘인터랙티브 웹 제작 못 따라가면 어떡하지?’
고민하기 보다 완강한 분들의 후기를 믿고 신청해보세요.

※ 열공챌린지는 강의 수강 중 기록하고 싶은 내용, 인상 깊었던 점, 수강 후기 등의 내용을 게시글 형태의 학습 일지로 작성하는 챌린지입니다







코딩 실력이 부족해서, 기존 강의는 코딩 지식을 필요로 해서,
웹 모션 디자인을 배우지도, 구현하지도 못했던 분들을 위한 강의!


기초부터 2D Canvas, 3D Three.js까지 2D부터 3D까지
실무에서 자주 사용하는 기능을 담은 21개 프로젝트로 상상을 현실로 구현하세요.


과정 소개

유저 경험을 개선하고, 화려한 효과로 시선까지 사로잡는

가장 트렌디한 웹, 인터랙티브 웹!
이 강의들 듣고 나면, 여러분도 만들 수 있어요!

2D부터 3D까지 한 강의에!

다양한 난이도의 21가지 프로젝트와 60개 이상의 기능 실습 예제로 구성했습니다.

학습목표

수강생이 구현하고 싶은 웹 효과를 기술 스택에 따라 학습하여 인터랙티브 웹을 구현할 수 있어요.

화려한 인터랙티브 웹 UI를 구현해 포트폴리오를 발전시킬 수 있어요.

인터랙티브 웹 학습으로 고객에게 효과적으로 메시지를 전달할 수 있어요.

추천대상

HTML, CSS, JS 등 웹 퍼블리싱에 대한 기본적인 지식이 있는 사람

웹 모션 디자인으로 화려한 포트폴리오를 만들고 싶은 취업/이직 준비생

유저에게 효과적으로 메시지를 전달할 방법을 고민하던 현직 디자이너/개발자

강의 구성


2D와 3D를 모두 담은 21가지 프로젝트로 학습합니다!
라이브러리 없는 인터랙티브 웹 개발 기초부터 2D와 3D 대표 라이브러리를 활용한 심화 단계까지.
파트별 학습 내용 및 기술 스택을 확인하고 나의 주력 분야를 만들어보세요!

2D 구현

  • HTML, CSS, JS의 기본 개념 만으로
    프로덕트 레벨의 인터랙티브 웹을 만듭니다.
    ① 움직이는 404 페이지
    전화위복! SVG 애니메이션을 활용해 긍정적인 사용자 경험을 제공하는 에러 페이지
    ② 까까오뱅크 인재영입 페이지 클론 코딩
    스크롤에 따라 반응하는 인터랙티브 웹 페이지 완성1 학습하기
    ( 스크롤에 맞춰 나타나고 사라지는 이미지/텍스트/비디오 )
    ③ 에어비앤비 클론 코딩
    본격적 인터랙티브 웹 학습 전, 대중적인 사이트를 제작하여 웹 기초 지식 살펴보기
    ④ FireWatch 클론 코딩
    시간차를 두고 등장하는 배경 레이어로 역동적 배경 제작하기 : Parallax scrolling
    ⑤ Next Level Fairs 클론 코딩
    스크롤에 따라 반응하는 인터랙티브 웹 페이지 완성2 학습하기
    ( 마우스 클릭 시간/이동 방향에 맞춰 반응하는 버튼과 이미지 )
  • 원리에 충실한 Canvas 로 2D를 구현하며
    Matter.js로 웹에서 중력을 표현합니다.
    ⑥ 마우스로 문지르면 숨겨진 그림이 나오는 배경
    Canvas를 활용해 전체 배경을 마우스 인터렉션이 가능한 인트로 화면으로 구성하기
    ⑦ 카운트다운하며 움직이는 배경
    3,2,1,! 카운트 다운 후 원형 파티클이 터지며 때를 알리는 효과
    ⑧ 움직이는 이미지를 활용한 미니게임
    마우스 클릭에 따라 이동하는 캐릭터로 게임 제작하기
    (스프라이트 이미지 애니메이션 학습 및 Collision Detection 충돌감지 학습)
    ⑨ 불꽃놀이 효과
    화려한 폭죽처럼 터지는 웹 효과로 움직이는 배경 제작하기
    (파티클, 속도, 중력, 마찰을 이용한 불꽃놀이 효과 구현)
    ⑩ 콘페티 효과 _ 불꽃놀이 효과 심화
    공연장에서 흩날리는 꽃가루 종이같은 효과 구현하기
    ⑪ 흔들리는 밧줄 효과
    마우스에 따라 밧줄이 탄력있게 흔들리는 효과 구현하기
    (탄성충돌, 벡터, Matter.js 라이브러리 일부 기능 직접 코드 작성 후 효과 구현)

3D 구현

  • Three.js 기술 이론 학습으로 3D를 구현하고
    프로젝트를 통해 더욱 구체화합니다.
    ⑫ 3D 큐브
    정육면체 3D 큐브를 만들어보면서 Three.js의 기본 구성 요소 이해하기
    ⑬ 3D 카드
    카드 플레이트 디자인을 3D로 추가하고 카메라 컨트롤을 더해 자유자재로 돌려볼 수 있는 인터랙션 구현하기
    ⑭ 오브젝트와 스크롤 연동하기
    Three.js를 Gsap과 함께 활용해 페이지 스크롤에 따라 반응하는 3D 오브젝트 구현하기
    ⑮ 3D 파티클 애니메이션
    BufferGeometry와 PointsMaterial, 그리고 Points를 활용해 파티클 효과 구현하기
    ⑯ 3D 공간 만들기
    Three.js를 통해 3차원 공간을 만드는 원리 익혀보기
    ⑰ 3D 캐릭터 컨트롤러 만들기
    웹에 3D 캐릭터 모델을 불러오고 다양한 컨트롤 입혀보기
  • Three.js 심화 및 Shader, 물리엔진 학습으로
    인터랙티브 웹 고급 개발자로 거듭납니다.
    ⑱ 3D 지구 : Starlight Earth (Basic)
    떨어지는 별 효과로 화려한 지구본 오브젝트 구현하기 1
    (간단한 Shader와 파티클, 카메라 개념을 활용하여 마우스로 조종할 수 있는 3D 지구 효과 구현)
    ⑲ 3D 지구 : Starlight Earth (Advanced)
    떨어지는 별로 화려한 지구본 오브젝트 구현하기 2
    (심화된 Shader와 Post Processing 등으로 다양한 인터랙티브 요소를 추가)
    ⑳ Fancy Gallery
    스크롤과 마우스 이벤트에 따라 인터랙티브 한 이미지 효과가 들어간 사진 갤러리 구현하기
    ㉑ My Own Playworld 게임
    3D 캐릭터와 캐릭터가 움직이는 맵을 제작하여 특정 장소 이동시 이벤트가 발생하는 게임을 제작해보기
커리큘럼

PART 1 HTML,CSS,JS

1. 스크롤에 따라 Active된 텍스트가 바뀌는 영역 (26주적금, 저금통 영역 등)
2. 스크롤에 따라 화면에 기울어지며 나타나는 이미지 (돈 주머니를 든 캐릭터 영역)
3. 스크롤에 따라 재생되는 비디오
*실제 사이트는 canvas를 활용하였으나 난이도를 고려하여 video 태그로 구현합니다.
4. 스크롤에 따라 바뀌는 position 속성 등 (Beyond Bank 영역)
5. 커서의 움직임에 맞춰 움직이는 요소, 배경
6. 누른 시간을 인식하여 일정 시간 이상 눌렀을 때 액션하는 버튼
7. 커서와 같은 방향으로 움직이는 요소
8. 다른 방향으로 움직이는 배경
9. 스크롤을 내리면 애니메이션과 함께 나타나는 이미지
10. 요소별로 스크롤 속도를 다르게 하여 나타나는 보다 역동적인 화면
11. 스크롤에 따라 이미지 사이에서 나타나는 텍스트
12. 미디어 쿼리를 통해 모바일 기기에서는 다른 스타일 적용 (반응형)
13. 마우스 hover 시 변하는 스타일
14. 배경 영역 생성
15. hovering 언더 바 생성
16. 마우스 클릭 시 변하는 스타일
17. 메뉴 버튼 활성화
18. 작아지는 아이콘 (이미지 내 하트 아이콘)
19. 크기가 커지며 나타나고 작아지며 사라지는 애니메이션
20. 크기가 변화하는 애니메이션
21. 요소가 자연스러운 속도로 이동하는 애니메이션

PART 2 Canvas

22. Canvas를 통한 움직이는 배경 제작
23. Canvas 파티클
24. x축, y축 환경의 2D 이해
25. 2D에서 구현하는 속도
26. 2D에서 구현하는 중력
27. 2D에서 구현하는 마찰력
28. GSAP 활용
29 마우스로 문지르면 뒷그림이 드러나는 웹 배경 효과 구현
30. 중력이 있는 듯 떨어지고 구르는 오브젝트 구현
31. 입자 이동을 구현하는 학습
32. 3-2-1 숫자를 세고 원을 그리며 퍼지는 파티클 구현 학습
33. 화려하게 흩뿌려지는 색종이 효과
34. 입자가 터지고 떨어지는 효과
35. 마우스 클릭에 따라 오브젝트가 이동하는 기능으로 만드는 게임 구현
36. 커서 이동으로 밧줄을 건드리면 흔들리며 반응하는 밧줄 움직임 구현

PART 3 Three.js 기초

37. GUI 컨트롤(카메라 컨트롤)
38. 조명 추가하기
39. 애니메이션 추가하기
40. 3D 오브젝트 학습을 위한 3D 큐브 생성하기
41. 다양한 유저 디바이스 크기에 따라 조절되는 반응형 3D 모델 만들기
42. 마우스 클릭/드래그시 3D 오브젝트의 회전 및 줌인&아웃 구현하기
43. 3D 오브젝트에 패럴렉스 스크롤링 적용하기(파트1에서 배운 내용의 3D버전)
44. 패럴랙스 스크롤 이후 특정 스크롤 지점에서 애니메이션 발생하기
45. 3D 환경에서 안개 효과 만들기
46. 3D 파티클로 2D 파티클보다 좀 더 화려한 효과 구현하기
47. 움직이는 3D 캐릭터 모델 구현하기
48. Gsap을 사용해 스크롤 이벤트 연동하기
49. 안개 효과

PART 4 Three.js 심화

50. 3D 지구의 기본 메시
51. 별 파티클 구현
52. 카메라의 Orbit Controls 학습
53 . Post Processing
54. 마우스 스크롤, 이동에 따라 회전하고 확대되는 3D 지구
55. 별과 운석이 떨어지고 그림자가 보이는 3D 지구
56. 마우스 이동에 따라 특정 위치에서 이벤트가 발생하는 효과 구현
57. 3D 캐릭터가 활동하는 맵
58. 스크롤에 따라 전진하는 이미지
59. 클릭&드래그로 이미지를 둘러보는 효과
60. 알파맵 효과
61. 도트 패턴 효과
62. 글로우 효과
63. 잔상 효과

  • *본 강의는 [초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas] 강의를 활용하여
    8주간 가장 효율적으로 학습할 수 있도록 만든 커리큘럼입니다.
    일부 영상이 같거나 유사할 수 있으며, 상세 정보는 과정소개서를 통해 확인해주시기 바랍니다.

    자세한 강의소개서 다운받기

강사 소개

믿고 들으셔도 됩니다.
인터랙티브 웹 실력자로 구성된 강사진
N사와 토스 출신 강사님부터 코드펜 pick 강사님까지!
이 분야 최고의 연사들이 본 강의를 진행합니다.

강의 미리보기

그래도 강의 신청이 망설여지시나요?
반응형 웹 완전 정복에서만 가질 수 있는 혜택 알려드릴게요!

혜택 01

이번 기수 신청자만
특별히 받을 수 있는 혜택

열공챌린지를 참여한 수강생분들께
커리어 스킬 UP할 수 있는 강의 3개를 드립니다.

  • 참여 방법

    1. 신청한 강의를 완주한다.
    2. 학습일지를 작성한다.
    3. 커리어 스킬 UP! 할 수 있는 수강권을 받는다.

  • 참여 혜택

    지정 강의 3개월(90일) 수강권 제공

혜택 02

학습 내용을 잊어버리지 않게
내 블로그에 열공챌린지를 쓰면 강의 하나 더!

지금이 아니면, 이 혜택은 사라집니다!
0일 0시간 0분 0초 2024-05-21T17:00
이번 기수 신청하기


완전히, 완벽하게,
완성도 높은 성장을 하고 싶으신가요?

온라인 단기 완주반과 함께라면 여러분의 목표를 이루실 수 있을 거에요.


100% 완강을 위한
완주를 돕는 러닝메이트


국비지원 수강생을 위한
완벽한 혜택

망설임은 시작을 늦출뿐이란 사실,
후기가 증명합니다.

내일배움카드 지원금이 남았다면,
다음엔 이런 강의를 추천드려요!

FAQ

⁕ 자세한 내용은 국비지원교육 고객센터에서 확인 가능합니다. ▶ 고객센터 바로가기

💳 내일배움카드 관련

💻 강의 관련

👩‍🎓 수료 관련

기타 문의 사항은 우측 하단의 챗봇 또는 아래 연락처로 문의 부탁드립니다.
전화 : 02-518-4831
메일 : help.edu@fastcampus.co.kr

*이용시간 : 평일 10:00~18:00 (점심시간 12~13시)